<template>
  <div class="head">
    <div class="head_top">
      <el-row :gutter="20">
        <el-col :span="4" :offset="2"
          ><div class="grid-content bg-purple">
            <router-link to="/">
              <el-image
                class="head_logo"
                src="/image/meishijie.png"
                fit="fill"
                :lazy="true"
              ></el-image
            ></router-link></div
        ></el-col>
        <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
        <el-col :span="6"
          ><div v-if="!user" class="grid-content bg-purple">
            <router-link to="/login?register=register" class="head_link"
              >注册</router-link
            >
            <router-link to="/login" style="margin-left: 20px" class="head_link"
              >登录</router-link
            >
          </div>
          <div v-else class="grid-content bg-purple">
            <router-link to="">
              <!-- <el-image class="head_link_avatar" :src="info.avatar" fit="fill" :lazy="true"></el-image> -->
              <!-- <img class="head_link_avatar" :src="info.avatar" alt="" /> -->
              <el-avatar
                class="head_link_avatar"
                shape="square"
                size="medium"
                :src="info.avatar"
              ></el-avatar>
            </router-link>
            <router-link class="head_link head_link_name" to="">{{
              user.name
            }}</router-link>
            <router-link class="head_link" to="">发布菜谱</router-link>
            <span class="head_link head_out" @click="outLogin">退出</span>
          </div>
        </el-col>
      </el-row>
    </div>
    <nav class="head_bottom">
      <el-row :gutter="20">
        <el-col :span="20" :offset="2">
          <el-menu router mode="horizontal" :default-active="activeIndex">
            <el-menu-item index="/"> 首页 </el-menu-item>
            <el-menu-item index="/recipe"> 菜谱大全 </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </nav>
    <div v-loading="loading" id="outLogin"></div>
  </div>
</template>

<script>
import { userInfo, userOutLogin } from "@/api";
export default {
  data() {
    return {
      loading: false,
      user: JSON.parse(localStorage.getItem("user") || null),
      info: {},
      activeIndex: "/",
    };
  },
  methods: {
    async outLogin() {
      this.loading = true;
      const body = document.querySelector("body");
      body.style.overflow = "hidden";
      const res = await userOutLogin();
      localStorage.clear();
      this.user = null;
      location.href = "/login";

      // this.$router.push('/login');
    },
  },
  async created() {
    console.log(this.user);
    if (this.user) {
      const info = await userInfo({ userId: this.user._id });
      if (info.code == 0) {
        this.info = info.data;
      } else {
        localStorage.clear();
        this.user = null;
        this.$message({
          message: info.mes,
          type: 'warning'
        });
      }
    }
  },
  watch: {
    $route: {
      handler(newVal) {
        this.activeIndex = newVal.path;
      },
      immediate: true, //立即执行
    },
  },
};
</script>

<style lang="stylus">
.head_top {
  background: #ca2726;
  height: 94px;
}

.head_logo {
  height: 70px;
  /* justify-content: space-between; */
  margin-top: 10px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

// .bg-purple{
// padding-top: 30px
// }
.head_link {
  display: block;
  float: left;
  padding-top: 36px;
  text-align: right;
  /* float: right; */
  color: #fcffff;
  margin-left: 10px;
}

.head_link_name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.head_link_avatar {
  width: 30px;
  height: 30px;
  margin-top: 30px;
  float: left;
}

.head_out {
  cursor: pointer;
}

.head_bottom {
  background: #fff;
  /* box-shadow: 0 15px 30px  rgba(0, 0, 0, .4); */
  border-bottom: 1px solid rgb(255, 251, 251);
}

.el-menu--horizontal {
  border-bottom: 0 !important;
}

#outLogin {
  position: initial !important;
}
</style>